<template>
  <div class="body_">
    <div class="Form_">
      <el-form
        ref="ruleForm"
        :inline="true"
        :model="ruleForm"
        :rules="rules"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item class="ipt_item" label="节目名称" prop="name">
          <el-input v-model="ruleForm.name" class="ipt_item_Input"></el-input>
        </el-form-item>
        <el-form-item class="ipt_item" label="文本内容" prop="desc">
          <el-input
            v-model="ruleForm.TextContent"
            :disabled="TextDis"
            :rows="4"
            class="ipt_item_Input"
            type="textarea"
          ></el-input>
        </el-form-item>
        <el-form-item label="文字大小" prop="FontSize">
          <el-input v-model="ruleForm.FontSize"></el-input>
        </el-form-item>
        <el-form-item label="字体类型" prop="FontSize">
          <el-select v-model="ruleForm.FontType" placeholder="请选择字体类型">
            <el-option
              v-for="item in FontTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文字颜色" prop="TextColor">
          <el-color-picker v-model="ruleForm.TextColor"></el-color-picker>
        </el-form-item>
        <el-form-item class="ipt_item" label="图片" prop="desc">
          <el-upload
            :auto-upload="false"
            :class="pictureDis ? 'not-go-index' : 'go-index'"
            action="#"
            :disabled="pictureDis"
            list-type="picture-card"
            ref="pictureUpload"
            :on-change="handleCurrentChange"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                :src="file.url"
                alt=""
                class="el-upload-list__item-thumbnail"
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
            <div slot="tip">支持上传多张图片，单张图片大小不超过3MB。</div>
          </el-upload>
        </el-form-item>
        <el-form-item class="ipt_item" label="视频" prop="desc">
          <el-upload
            ref="VideoUpload"
            class="upload-demo"
            action="#"
            :auto-upload="false"
            :file-list="VideoFileList"
            :on-change="VideoHandleChange"
          >
            <el-button
              slot="trigger"
              :disabled="VideoDis"
              size="small"
              type="primary"
              >选取文件</el-button
            >
            <div slot="tip">仅支持上传单个视频。</div>
          </el-upload>
        </el-form-item>
        <el-form-item class="ipt_item from_bottom">
          <el-button type="primary" @click="submitForm('ruleForm')"
            >立即发布</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { LEDUploadFile, uploadPrograms } from "@/api/LED.js";
export default {
  // import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  watch: {
    PictureUploadFiles(newVal, oldVal) {
      if (newVal.length > 0) {
        this.VideoDis = true;
        this.TextDis = true;
      } else {
        this.VideoDis = false;
        this.TextDis = false;
      }
    },
    VideoUploadFiles(newVal, oldVal) {
      if (newVal.length > 0) {
        this.pictureDis = true;
        this.TextDis = true;
      } else {
        this.pictureDis = false;
        this.TextDis = false;
      }
    },
    "ruleForm.TextContent": {
      handler(newVal, oldVal) {
        if (newVal != "") {
          this.VideoDis = true;
          this.pictureDis = true;
        } else {
          this.VideoDis = false;
          this.pictureDis = false;
        }
      },
    },
  },
  data() {
    // 这里存放数据
    return {
      ruleForm: {
        TextColor: "#F40303",
        FontSize: "24",
        name: "",
        TextContent: "",
        FontType: "宋体",
      },
      FontTypeOptions: [
        {
          label: "微软雅黑",
          value: "微软雅黑",
        },
        {
          label: "宋体",
          value: "宋体",
        },
        {
          label: "Arial",
          value: "Arial",
        },
        {
          label: "Tahoma",
          value: "Tahoma",
        },
        {
          label: "华文黑体",
          value: "华文黑体",
        },
      ],
      PictureFileList: [],
      VideoFileList: [],
      pictureDis: false,
      VideoDis: false,
      TextDis: false,
      // 图片ref
      PictureUploadFiles: null,
      // 视频ref
      VideoUploadFiles: null,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      rules: {
        name: [{ required: true, message: "请输入节目名称", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.PictureUploadFiles = this.$refs.pictureUpload.uploadFiles;
    this.VideoUploadFiles = this.$refs.VideoUpload.uploadFiles;
  },
  // 方法集合
  methods: {
    handleClick(tab, event) {},
    handleSizeChange() {},
    handleCurrentChange(file) {
      //    只能上传图片类型文件
      const fileSuffix = file.name.substring(file.name.lastIndexOf("."));
      console.log(fileSuffix);
      const whiteList = [
        ".xbm",
        ".tif",
        ".pjp",
        ".svgz",
        ".jpg",
        ".jpeg",
        ".ico",
        "tiff",
        ".gif",
        "svg",
        ".jfif",
        ".webp",
        ".png",
        ".bmp",
        "pjpeg",
        ".avif",
      ];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$message("请选择图片类型文件");
        for (var i = 0; i < this.PictureUploadFiles.length; i++) {
          if (this.PictureUploadFiles[i]["url"] == file.url) {
            this.PictureUploadFiles.splice(i, 1);
          }
        }
      }
      //   文件大小设置3m
      if (file.size > 3145728) {
        this.$message("仅支持大小在3M以下图片");
        for (var i = 0; i < this.PictureUploadFiles.length; i++) {
          if (this.PictureUploadFiles[i]["url"] == file.url) {
            this.PictureUploadFiles.splice(i, 1);
          }
        }
      }
    },
    // 图片
    handleRemove(file) {
      for (var i = 0; i < this.PictureUploadFiles.length; i++) {
        if (this.PictureUploadFiles[i]["url"] == file.url) {
          this.PictureUploadFiles.splice(i, 1);
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //   视频
    VideoHandleChange(file, fileList) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["mp4", "flv", "f4v", "webm"];
      if (this.VideoUploadFiles.length > 1) {
        this.VideoUploadFiles = this.VideoUploadFiles.slice(
          0,
          this.VideoUploadFiles.length - 1
        );
        this.$message("只能上传一个文件");
      } else {
        if (whiteList.indexOf(fileSuffix) === -1) {
          this.$message("上传文件只能是 mp4、flv、f4v、webm格式");
          this.$refs.VideoUpload.uploadFiles = [];
        }
      }
    },
    submitForm(formName) {
      let that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 判断至少填一种类型
          if (
            that.PictureUploadFiles.length != 0 ||
            that.VideoUploadFiles.length != 0 ||
            that.ruleForm.TextContent != ""
          ) {
            //   整理数据 TextData PictureData VideoData
            let formData = new FormData();
            let TextData = this.ruleForm;
            let VideoData;
            if (that.PictureUploadFiles.length > 0) {
              that.PictureUploadFiles.forEach((e) => {
                formData.append("file", e.raw);
                formData.append("type", 1);
                this.UploadInfo(formData, 1);
              });
            }
            if (that.VideoUploadFiles.length > 0) {
              VideoData = that.VideoUploadFiles[0].raw;
              formData.append("file", VideoData);
              formData.append("type", 2);
              this.UploadInfo(formData, 2);
            }
            if (
              that.VideoUploadFiles.length == 0 &&
              that.PictureUploadFiles.length == 0
            ) {
              let query = {
                name: this.ruleForm.name,
              };
              query.type = 0;
              query.fontStyle = {
                fontColor: this.ruleForm.TextColor,
                fontName: this.ruleForm.FontType,
              };
              query.textContent = this.ruleForm.TextContent;
              uploadPrograms(query).then((response) => {
                if (response.success) {
                  this.$message("新增节目成功");
                }
              });
            }
            // formData.append("data", this.ruleForm);
          } else {
            this.$message({
              message: '请至少选择一种投屏类型:"文本"、"图片"、"视频"',
              type: "warning",
            });
          }
        } else {
          return false;
        }
      });
    },
    async UploadInfo(FromData_, type) {
      // 上传文件 获取url
      try {
        let { data: fileUrl } = await LEDUploadFile(FromData_);
        // 上传文件信息
        let query = {
          name: this.ruleForm.name,
        };
        //文件url
        if (type === 2) {
          query.videoUrl = fileUrl.filePath;
          query.type = 2;
          uploadPrograms(query).then((response) => {
            console.log(response);
            if (response.success) {
              this.$message("新增节目成功");
            }
          });
        } else if (type === 1) {
          query.type = 1;
          query.picUrl = fileUrl.filePath;
          uploadPrograms(query).then((response) => {
            console.log(response);
            if (response.success) {
              this.$message("新增节目成功");
            }
          });
        }
      } catch (error) {
        console.error("An error occurred:", error);
      }
    },
    //   是否直接上传
    Upload(param) {
      this.$confirm("是否直接将节目发布?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(param);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已将节目加入节目列表",
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.body_ {
  padding: 0.2rem 0.3rem /* 24/80 */;
  .Form_ {
    padding-left: 2.5rem;
  }
  .el-tabs {
    padding: 0.2625rem /* 21/80 */ 0;

    .el-header {
      width: 100%;
      height: 1.75rem !important /* 140/80 */
    ;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

    .el-main {
      margin-top: 0.3rem /* 24/80 */;
      width: 100%;
      height: 6.75rem /* 540/80 */ !important;
      border-radius: 4px;
      background-color: rgb(255, 255, 255);
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    }
  }
  .go-index {
    cursor: pointer;
    pointer-events: auto;
  }
  .not-go-index {
    cursor: not-allowed;
    pointer-events: none; // 禁止点击事件
  }
  .ipt_item {
    width: 100%;
  }

  .ipt_item_Input {
    width: 14rem;
  }
  .from_bottom {
    text-align: center;
  }
}

.operter {
  color: rgba(59, 140, 255, 1) !important;
  cursor: pointer;
}

::v-deep .el-upload--picture-card {
  width: 87px;
  height: 87px;
  line-height: 87px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 87px;
  height: 87px;
}
</style>
